<template>
  <canvas ref="shelf" width="1000" height="500" style="left: 0; width:1000px; height:500px"></canvas>
  <div ref="tips" v-show="showTips"
       style="position: absolute; height: 100px;width: 100px;opacity:0.5; background-color: #42b983; border-color: #42b983;border-width: 1px;border-style: solid">
    {{ tipsText }}
  </div>
  <div style="width: 300px;height: 300px;border-style: solid;border-width: 1px" :onmouseup="dragEnd"></div>
</template>

<script>
export default {
  name: "WmsCanvas",
  data() {
    return {
      theColors: {
        HasGoods: "#00FF00",
        Null: "#848484",
        Empty: "#FF8000",
        Lock: "#FF0000",
        Text: "#000000",
        Border: "#0000FF"
      },
      baseWidth: 100,
      canvasOptions: [
        {
          containerCode: "1001",
          positionCode: "",
          x: 1,
          y: 2,
          z: 1,
          state: 0,
        },
        {
          containerCode: "1002",
          positionCode: "",
          x: 1,
          y: 1,
          z: 1,
          state: 1,
        },
        {
          containerCode: "1003",
          positionCode: "",
          x: 2,
          y: 2,
          z: 1,
          state: 2,
        },
        {
          containerCode: "1004",
          positionCode: "",
          x: 2,
          y: 1,
          z: 2,
          state: 3,
        },
      ],
      showTips: false,
      tipsText: "",
      startPoint:{
        x:0,
        y:0
      }
    }
  },
  methods: {
    initCanvas() {
      // this.canvasOptions.forEach(item => {
      //
      //   let x = (item.x - 1) * this.baseWidth
      //   let y = (item.y - 1) * this.baseWidth
      //   console.log('x=>',x,'y=>',y)
      // })
      var canvas = this.$refs.shelf
      var tips = this.$refs.tips
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        this.canvasOptions.forEach(item => {

          let x = (item.x - 1) * this.baseWidth
          let y = (item.y - 1) * this.baseWidth
          // 开始
          ctx.lineWidth = "1";
          ctx.strokeStyle = "white"
          let fillColor = this.theColors.Null;
          let fillText = "无";
          switch (item.state) {
            case 0: {
              fillText = "无"
              fillColor = this.theColors.Null
              break
            }
            case 1: {
              fillText = "有"
              fillColor = this.theColors.HasGoods
              break
            }
            case 3: {
              fillText = "锁"
              fillColor = this.theColors.Lock
              break
            }
            case 2: {
              fillText = "空"
              fillColor = this.theColors.Empty
              break
            }
          }

          ctx.fillStyle = fillColor
          ctx.fillRect(x, y, this.baseWidth, this.baseWidth)
          ctx.font = "bold 50pt Arial";
          ctx.fillStyle = this.theColors.Text;
          ctx.fillText(fillText, x + 18, y + 75, this.baseWidth);

        })
        ctx.stroke()
        canvas.onmousemove = (e) => {

          if (e.clientX > 0 && e.clientY > 0) {
            this.showTips = true
            // tips.style.left = e.clientX + 'px';
            // tips.style.top = e.clientY + 'px';


          } else if (e.clientX > 200 && e.clientY > 200) {
            this.showTips = false
          } else {
            this.showTips = false
          }
          var cRect = canvas.getBoundingClientRect();
          var canvasX = Math.round(e.clientX - cRect.left);
          var canvasY = Math.round(e.clientY - cRect.top);

          ctx.fillStyle = this.theColors.Text
          ctx.clearRect(500, 400, 1500, 500);
          ctx.fillText("X: " + e.clientX + ", Y: " + e.clientY, 500, 500);


          var boxX = canvasX / this.baseWidth | 0
          var boxY = canvasY / this.baseWidth | 0
          // tips.style.left = ((boxX + 0) * this.baseWidth + cRect.left) + 'px';
          // tips.style.top = ((boxY + 0) * this.baseWidth + cRect.top) + 'px';

          ctx.clearRect(500, 800, 1500, 500);
          ctx.fillText("X: " + boxX + ", Y: " + boxY, 500, 800);
          // this.tipsText = (((boxX - 1) * this.baseWidth + cRect.left)) + '|' + ((boxY - 1) * this.baseWidth + cRect.top)
          this.startPoint.x=boxX
          this.startPoint.y= boxY
          e.preventDefault();
          this.playTips(boxX + 1, boxY + 1)


        }
        canvas.onclick = (e) => {
          console.log("点击")
          e.preventDefault();
        }
        canvas.ondragenter = (e) => {
          console.log("拖拽enter",e)
          e.preventDefault();
        }
        canvas.ondragleave = (e) => {
          console.log("拖拽离开")
          e.preventDefault();
        }
        canvas.onmouseup = (e) => {
          console.log("鼠标松开")
          e.preventDefault();
        }
        tips.onselectstart = (e) => {
          console.log("选中文本开始")
          e.preventDefault();
        }

      }
    },
    playTips(x, y) {
      var result;
      for (let i = 0; i < this.canvasOptions.length; i++) {
        if (this.canvasOptions[i].x === x) {
          if (this.canvasOptions[i].y === y) {
            result = this.canvasOptions[i]
          }
        }
      }

      // var result = this.canvasOptions.map(x => x.x === x)
      if(result!=null){
        this.tipsText = result.containerCode
      }
    },
    dragEnd(){
      console.log(this.startPoint)
    }
  },
  mounted() {
    this.initCanvas()
  }
}
</script>

<style scoped>
.canvas {
  width: 800px;
  height: 600px;
}
</style>
